<template>
  <div class="dashboard-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix bg-pure-dark">
        <el-row>
          <el-col :span="3" class="">
            <div class="">今日数据概况</div>
          </el-col>
          <el-col :span="21" class="">
            <div class="">
              <el-select v-if="roleCheck('virtual')" v-model="generalStatisticsRange">
                <el-option v-for="item in consts.STATISTICS_RANGE"
                           :key="item.value"
                           :label="item.title"
                           :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-col>
        </el-row>
      </div>
      <div>
        <el-row :span="24">
          <el-col :span="14" align="right">
            <el-button class="filter-item" type="text" @click="checkDetail('rechargeWithdraw')">查看详细数据</el-button>
          </el-col>
          <el-col :span="6" align="right">
            <el-button class="m-r-10" type="text" @click="checkDetail('onPoints')">查看详细数据</el-button>
          </el-col>
          <el-col :span="3" align="right">
            <el-button class="m-r-10" type="text" @click="checkDetail('newUser')">查看详细数据</el-button>
          </el-col>
          <!--<el-col :span="3" align="right">-->
          <!--<el-button class="" type="text" @click="checkDetail('firstdata')">查看详细数据</el-button>-->
          <!--</el-col>-->
          <!--<el-col :span="2">-->
          <!--<el-button class="filter-item" type="text" @click="checkDetail('promo')">查看详细数据</el-button>-->
          <!--</el-col>-->
        </el-row>
        <el-row :span="24">
          <el-col :span="2">
            <div class="card-container">
              <div class="card-name"></div>
              <div class="card-data">今天</div>
              <div class="card-data">昨天</div>
            </div>
          </el-col>
          <el-col class="db-category-item " :class="{active:currentCategory==item.key,'gutter': item.className=='gutter'}"
                  v-for="(item,index) in categoryList"
                  :span="3" :xs="6" :md="3"
                  :key="item.key" v-if="index<7">
            <div @click="categoryChange(item.key)" v-if="item.decimal==2">
              <div class="card-name">{{item.name}}</div>
              <div class="card-data">{{(item.data && item.data.length==2 && item.data[0])||0 | currency}}</div>
              <div class="card-data">{{(item.data && item.data.length==2 && item.data[1])||0 | currency}}</div>
            </div>
            <div @click="categoryChange(item.key)" v-else>
              <div class="card-name">{{item.name}}</div>
              <div class="card-data">{{(item.data && item.data.length==2 && item.data[0])||0 | currency(undefined,0)
                }}
              </div>
              <div class="card-data">{{(item.data && item.data.length==2 && item.data[1])||0 | currency(undefined,0)
                }}
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :span="24">
          <el-col :span="14" align="right">
            <el-button class="filter-item" type="text" @click="checkDetail('betting')">查看详细数据</el-button>
          </el-col>
          <el-col :span="6" align="right">
            <el-button class="m-r-10" type="text" @click="checkDetail('promo')">查看详细数据</el-button>
          </el-col>
          <el-col :span="3" align="right">
            <el-button class="filter-item" type="text" @click="checkDetail('activeUser')">查看详细数据</el-button>
          </el-col>

        </el-row>
        <el-row :span="24">
          <el-col :span="2">
            <div class="card-container">
              <div class="card-name"></div>
              <div class="card-data">今天</div>
              <div class="card-data">昨天</div>
            </div>
          </el-col>
          <el-col class="db-category-item " :class="{active:currentCategory==item.key,'gutter': item.className=='gutter'}"
                  v-for="(item,index) in categoryList"
                  :span="3" :xs="6" :md="3"
                  :key="item.key" v-if="index>6">
            <div @click="categoryChange(item.key)" v-if="item.decimal==2">
              <div class="card-name">{{item.name}}</div>
              <div class="card-data">{{(item.data && item.data.length==2 && item.data[0])||0 | currency}}</div>
              <div class="card-data">{{(item.data && item.data.length==2 && item.data[1])||0 | currency}}</div>
            </div>
            <div @click="categoryChange(item.key)" v-else>
              <div class="card-name">{{item.name}}</div>
              <div class="card-data">{{(item.data && item.data.length==2 && item.data[0])||0 | currency(undefined,0)
                }}
              </div>
              <div class="card-data">{{(item.data && item.data.length==2 && item.data[1])||0 | currency(undefined,0)
                }}
              </div>
            </div>
          </el-col>

        </el-row>

        <div class="category-echart height-300">
          <category-chart :type="currentCategory" :x-data="currentXData" :y-data="currentYData"></category-chart>
        </div>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix bg-pure-dark">
        <el-row :gutter="10">
          <el-col :span="12">
            <div>今日注册首存数据</div>
          </el-col>
          <el-col :span="12" getter>
            <div>历史注册今日首存数据</div>
          </el-col>
        </el-row>
      </div>
      <div>
        <el-row :span="24" :gutter="10">
          <el-col :span="12">
            <el-row >
              <el-col class="db-category-item"
                      v-for="(item,index) in fistRechargeStatistics"
                      v-if="index<=3"
                      :span="item.span" :xs="item.span*2" :md="item.span"
                      :key="index">
                <div class="card-name-out">
                  <div class="card-name">{{item.name}}</div>
                  <div class="card-data">{{item.data}}</div>
                </div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row >
              <el-col class="db-category-item"
                      v-for="(item,index) in fistRechargeStatistics"
                      v-if="index>3"
                      :span="item.span" :xs="item.span*2" :md="item.span"
                      :key="index">
                <div class="card-name-out">
                  <div class="card-name">{{item.name}}</div>
                  <div class="card-data">{{item.data}}</div>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix bg-pure-dark game-sum">
        <el-row>
          <el-col :span="4" class="">
            <div class="">公司游戏盈亏汇总</div>
          </el-col>
          <el-col :span="8" class="">
            <div class="">
              <el-select v-if="roleCheck('virtual')"  v-model="profitStatisticsRange">
                <el-option v-for="item in consts.STATISTICS_RANGE"
                           :key="item.value"
                           :label="item.title"
                           :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="12" class="" align="right">
            <el-button type="text" @click="changePeriod('today')" :class="{active:period=='today'}">今日</el-button>
            &nbsp;|
            <el-button type="text" @click="changePeriod('yesterday')" :class="{active:period=='yesterday'}">昨日
            </el-button>
          </el-col>
        </el-row>
      </div>
      <!--<div class="height-200" ref="profitChart">-->
        <!--<el-table :data="gameData" border style="width:100%">-->
          <!--<el-table-column v-for="(item,index) in consts.GAME_WIN_BET" :key="item.prop+index"-->
            <!--:prop="item.prop"-->
            <!--:label="item.label">-->
            <!--<template slot-scope="{row}">-->
              <!--<span  v-if="item.prop!=='typeName'" :class="{'green': row[item.prop]>0,'red': row[item.prop]<0}">{{row[item.prop] | currency}}</span>-->
              <!--<span v-else>{{row[item.prop]}}</span>-->
            <!--</template>-->
          <!--</el-table-column>-->
        <!--</el-table>-->
      <!--</div>-->
      <div class="height-200 list-profit-loss" ref="profitChart">
        <div class="detail" v-for="(item,index) in consts.GAME_WIN_BET" :key="item.prop+index">
          <div class="detail-item">{{item.label}}</div>
          <template v-if="index === 0">
            <div class="detail-item">{{gameData[index].typeName}}</div>
            <div class="detail-item">{{gameData[index + 1].typeName}}</div>
          </template>
          <template v-else>
            <div class="detail-item" :class="{'green': gameData[0][item.prop]>0,'red': gameData[0][item.prop]<0}">{{gameData[0][item.prop] | currency}}</div>
            <div class="detail-item" :class="{'green': gameData[1][item.prop]>0,'red': gameData[1][item.prop]<0}">{{gameData[1][item.prop] | currency}}</div>
          </template>
        </div>
      </div>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix bg-pure-dark">
        <el-row>
          <el-col :span="24" class="">
            <div class="">公司游戏盈亏图表数据</div>
            <div class="db-profit-filter">
              <el-button type="text" :class="{active:currentGameStatisticType=='win'}"
                         @click="changeGameStatisticType('win')">盈亏数据
              </el-button> &nbsp;&nbsp;|
              <el-button type="text" :class="{active:currentGameStatisticType=='amount'}"
                         @click="changeGameStatisticType('amount')">投注额数据
              </el-button>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="height-300 profit-chart" ref="profitChart">
        <profit-chart :x-data="gameXData" :y-data="gameYData"></profit-chart>
      </div>
    </el-card>
    <custom-dialog :visible="visibleDialog=='rechargeWithdraw'" returnButtonName="返回" :callback="closeDialog">
      <div slot="title">充值提现明细</div>
      <recharge-withdraw-detail v-if="visibleDialog=='rechargeWithdraw'" :time="dialogProps" :isFake="generalStatisticsRange"></recharge-withdraw-detail>
    </custom-dialog>
    <custom-dialog :visible="visibleDialog=='onPoints'" returnButtonName="返回" :callback="closeDialog">
      <div slot="title">实际代充总额</div>
      <on-points-detail v-if="visibleDialog=='onPoints'" :time="dialogProps" :isFake="generalStatisticsRange"></on-points-detail>
    </custom-dialog>
    <custom-dialog :visible="visibleDialog=='newUser'" returnButtonName="返回" :callback="closeDialog">
      <div slot="title">新用户明细</div>
      <new-user-detail v-if="visibleDialog=='newUser'" :time="dialogProps" :isFake="generalStatisticsRange"></new-user-detail>
    </custom-dialog>
    <custom-dialog :visible="visibleDialog=='activeUser'" returnButtonName="返回" :callback="closeDialog">
      <div slot="title">活跃用户明细</div>
      <active-user-detail v-if="visibleDialog=='activeUser'" :time="dialogProps" :isFake="generalStatisticsRange"></active-user-detail>
    </custom-dialog>
    <custom-dialog :visible="visibleDialog=='betting'" returnButtonName="返回" :callback="closeDialog">
      <div slot="title">投注详情</div>
      <betting-detail v-if="visibleDialog=='betting'" :time="dialogProps" :isFake="generalStatisticsRange"></betting-detail>
    </custom-dialog>
    <custom-dialog :visible="visibleDialog=='firstdata'" returnButtonName="返回" :callback="closeDialog">
      <div slot="title">首存人数金额明细</div>
      <first-data v-if="visibleDialog=='firstdata'" :time="dialogProps" :isFake="generalStatisticsRange"></first-data>
    </custom-dialog>
    <custom-dialog :visible="visibleDialog=='promo'" returnButtonName="返回" :callback="closeDialog">
      <div slot="title">优惠详情</div>
      <promo-general-detail v-if="visibleDialog=='promo'" :time="dialogProps" ></promo-general-detail>
    </custom-dialog>
  </div>
</template>

<script>
import getCommand from '@/mixins/getCommand';
import { mapGetters } from 'vuex';
import categoryChart from '../components/categoryChart';
import ProfitChart from '../components/porfitChart';
import CommonChart from '../components/commonChart';

import rechargeWithdrawDetail from '../detail/rechargeWithdrawDetail';
import newUserDetail from '../detail/newUserDetail';
import onPointsDetail from '../detail/onPointsDetail';
import activeUserDetail from '../detail/activeUserDetail';
import bettingDetail from '../detail/bettingDetail';
import firstData from '../detail/firstData';
import promoGeneralDetail from '../detail/promoGeneralDetail';

import {
  realTimePromoInfoApi,
  trendPromoInfoApi,
  promoInfoListApi,
  promoInfoDetailListApi,
} from '@/services/api/operationalRealTime';
import { getFirstDataDetailApi } from '@/services/api/operational';

export default {
  name: 'real-time',
  components: {
    CommonChart,
    ProfitChart,
    categoryChart,
    rechargeWithdrawDetail,
    newUserDetail,
    onPointsDetail,
    activeUserDetail,
    bettingDetail,
    firstData,
    promoGeneralDetail,
  },
  mixins: [getCommand],
  data() {
    return {
      categoryData: {
        dateList: [],
      },
      generalStatisticsRange: 0,
      profitStatisticsRange: 0,
      promoInfo: {}, // 活动数据
      period: 'today',
      currentCategory: undefined,
      currentGameStatisticType: 'win',
      // 当日的盈亏
      visibleDialog: undefined, // rechargeWithdraw,newUser,activeUser,betting,promo
      dialogProps: [moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
      basicFirstRechargeData: {},
    };
  },
  computed: {
    ...mapGetters([]),
    ...mapState({
      realTime: state => state.realTime,
    }),
    // 实时当前图表数据
    currentDate() {
      const array = [];
      _.forIn(this.realTime && this.realTime[this.currentCategory] && this.realTime[this.currentCategory].today || {}, (value, key) => {
        array.push({
          x: key,
          y: value,
        });
      });
      return _.sortBy(array, item => item.x);
    },
    // 首存统计
    fistRechargeStatistics() {
      const basic = this.basicFirstRechargeData;
      return [
        {
          span: 6,
          name: '今日注册首存人数',
          data: basic.newRegFirstRechargeUser,
        },
        {
          span: 6,
          name: '今日注册首存金额',
          data: _.currency(basic.newRegFirstRechargeMoney),
        },
        {
          span: 6,
          name: '今日注册首次上分人数',
          data: basic.newRegFirstUpAmountUser,
        },
        {
          span: 6,
          name: '今日注册首次上分金额',
          data: _.currency(basic.newRegFirstUpAmountMoney),
        },
        {
          span: 6,
          name: '历史注册今日首存人数',
          data: basic.firstRechargeUser,
        },
        {
          span: 6,
          name: '历史注册今日首存金额',
          data: _.currency(basic.firstRechargeMoney),
        },
        {
          span: 6,
          name: '历史注册今日首次上分人数',
          data: basic.firstUpAmountUser,
        },
        {
          span: 6,
          name: '历史注册今日首次上分金额',
          data: _.currency(basic.firstUpAmountMoney),
        },
      ];
    },
    // 实时基本数据
    categoryList() {
      const basic = this.realTime.basic || {};
      const { promoInfo } = this;
      return [
        {
          key: 'recharge',
          name: '充值',
          span: 6,
          data: basic.rechargeSumMoney,
          decimal: 2,
        },
        {
          key: 'rechargeUser',
          name: '充值人数',
          span: 6,
          data: basic.rechargeUniqueUser,
        },
        {
          key: 'withdraw',
          name: '总出款',
          span: 6,
          data: basic.withdrawSumMoney,
          decimal: 2,
        },
        {
          key: 'withdrawUser',
          name: '出款人数',
          span: 6,
          data: basic.withdrawUniqueUser,
          className: 'gutter',
        },
        {
          key: 'upAmountUnique',
          name: '代充总人数',
          span: 12,
          data: basic.upAmountUniqueUser,
        },
        {
          key: 'onPoints',
          name: '实际代充总额',
          span: 12,
          data: basic.upAmountSumMoney,
          className: 'gutter',
          decimal: 2,
        },
        {
          key: 'newUser',
          name: '新注册会员',
          span: 24,
          data: basic.newUserCnt,
        },
        // 第二排
        {
          key: 'bettingAmount',
          name: '总投注额',
          span: 6,
          data: basic.bettingSumMoney,
          decimal: 2,
        },
        {
          key: 'bettingWin',
          name: '会员输赢',
          span: 6,
          data: basic.totalWinLose,
          decimal: 2,
        },
        {
          key: 'bettingEffect',
          name: '有效投注额',
          span: 6,
          data: basic.bettingEffectMoney, // todo -缺少该数据字段
          decimal: 2,
        },
        {
          key: 'bettingUser',
          name: '投注人数',
          span: 6,
          data: basic.bettingUniqueUser,
          className: 'gutter',
        },
        {
          key: 'promoUser',
          name: '活动参与人数',
          span: 12,
          data: promoInfo.participantsNumber || [0, 0],
        },
        {
          key: 'promoAmount',
          name: '活动领取金额',
          span: 12,
          data: promoInfo.receivingAmount || [0, 0],
          decimal: 2,
          className: 'gutter',
        },
        {
          key: 'activeUser',
          name: '活跃会员',
          span: 24,
          data: basic.activeUserCnt,
        },
      ];
    },
    // 实时盈亏数据
    gameData() {
      const game = this.realTime.gameProfitBasic
          || {
            1001: { game: 'AG真人', amount: 0, win: 0 },
            1004: { game: 'AG捕鱼', amount: 0, win: 0 },
            7002: { game: '贝博体育', amount: 0, win: 0 },
            4003: { game: 'PT电子', amount: 0, win: 0 },
            2001: { game: 'eBET真人', amount: 0, win: 0 },
            8000: { game: 'LB彩票', amount: 0, win: 0 },
            10006: { game: '欢乐棋牌', amount: 0, win: 0 },
            11006: { game: '贝博棋牌', amount: 0, win: 0 },
            1003: { game: 'AG电子', amount: 0, win: 0 },
            2003: { game: 'eBET电子', amount: 0, win: 0 },
            13001: { game: '小金真人', amount: 0, win: 0 },
            19000: { game: '双赢彩票', amount: 0, win: 0 },
            17003: { game: 'PP电子', amount: 0, win: 0 },
            12000: { game: '5GM彩票', amount: 0, win: 0 },
            23004: { game: 'MW捕鱼', amount: 0, win: 0 },
            18005: { game: 'IM电竞', amount: 0, win: 0 },
            // 16002: { game: '虚拟体育', amount: 0, win: 0 },
          };
      return [
        {
          typeName: '盈亏',
          prop0: this.getTotal(1, game),
          prop1: this.checkGame(1, game, consts.PLATFORM_AG_REAL),
          prop2: this.checkGame(1, game, consts.PLATFORM_AG_FISH),
          prop3: this.checkGame(1, game, consts.PLATFORM_AG_GAME),
          prop4: this.checkGame(1, game, consts.PLATFORM_PT),
          prop5: this.checkGame(1, game, consts.PLATFORM_EBET_REAL),
          prop6: this.checkGame(1, game, consts.PLATFORM_EBET_GAME),
          prop7: this.checkGame(1, game, consts.PLATFORM_JOY_POKER),
          prop8: this.checkGame(1, game, consts.PLATFORM_GM_POKER),
          prop9: this.checkGame(1, game, consts.PLATFORM_GAME_SPORTS),
          prop10: this.checkGame(1, game, consts.PLATFORM_TICKET),
          prop11: this.checkGame(1, game, consts.PLATFORM_SMALL_GOLD_REAL),
          prop12: this.checkGame(1, game, consts.PLATFORM_WINWIN_LOTTERY),
          prop13: this.checkGame(1, game, consts.PLATFORM_PP_GAME),
          prop14: this.checkGame(1, game, consts.PLATFORM_FIVE_GM_LOTTERY),
          prop16: this.checkGame(1, game, consts.PLATFORM_MW_FISH),
          prop17: this.checkGame(1, game, consts.PLATFORM_IM_ESPORT),
          // prop18: this.checkGame(1, game, consts.PLATFORM_VIRTUAL_SPORT),

        },
        {
          typeName: '投注额',
          prop0: this.getTotal(2, game),
          prop1: this.checkGame(2, game, consts.PLATFORM_AG_REAL),
          prop2: this.checkGame(2, game, consts.PLATFORM_AG_FISH),
          prop3: this.checkGame(2, game, consts.PLATFORM_AG_GAME),
          prop4: this.checkGame(2, game, consts.PLATFORM_PT),
          prop5: this.checkGame(2, game, consts.PLATFORM_EBET_REAL),
          prop6: this.checkGame(2, game, consts.PLATFORM_EBET_GAME),
          prop7: this.checkGame(2, game, consts.PLATFORM_JOY_POKER),
          prop8: this.checkGame(2, game, consts.PLATFORM_GM_POKER),
          prop9: this.checkGame(2, game, consts.PLATFORM_GAME_SPORTS),
          prop10: this.checkGame(2, game, consts.PLATFORM_TICKET),
          prop11: this.checkGame(2, game, consts.PLATFORM_SMALL_GOLD_REAL),
          prop12: this.checkGame(2, game, consts.PLATFORM_WINWIN_LOTTERY),
          prop13: this.checkGame(2, game, consts.PLATFORM_PP_GAME),
          prop14: this.checkGame(2, game, consts.PLATFORM_FIVE_GM_LOTTERY),
          prop16: this.checkGame(2, game, consts.PLATFORM_MW_FISH),
          prop17: this.checkGame(2, game, consts.PLATFORM_IM_ESPORT),
          // prop18: this.checkGame(2, game, consts.PLATFORM_VIRTUAL_SPORT),
        },
      ];
    },
    currentXData() {
      return _.map(this.currentDate, item => item.x);
    },
    currentYData() {
      return _.map(this.currentDate, item => item.y);
    },
    gameChartAllData() {
      const gameChartAllData = [];
      _.forIn(this.realTime.gameProfit, (value, key) => {
        gameChartAllData.push(
          {
            x: key,
            y: value,
          },
        );
      });
      return _.sortBy(gameChartAllData, item => item.x);
    },
    gameXData() {
      return _.map(this.gameChartAllData, item => item.x);
    },
    gameYData() {
      const returnData = [];
      const gameList = {
        agReal: {
          id: 1,
          title: 'AG真人',
          value: [],
        },
        agFish: {
          id: 2,
          title: 'AG捕鱼',
          value: [],
        },
        agGame: {
          id: 6,
          title: 'AG电子',
          value: [],
        },
        ebet: {
          id: 5,
          title: 'eBET真人',
          value: [],
        },
        pt: {
          id: 4,
          title: 'PT电子',
          value: [],
        },
        xj188: {
          id: 3,
          title: '贝博体育',
          value: [],
        },
        sycp: {
          id: 8,
          title: 'LB彩票',
          value: [],
        },
        hlqp: {
          id: 10,
          title: '欢乐棋牌',
          value: [],
        },
        gmqp: {
          id: 11,
          title: '贝博棋牌',
          value: [],
        },
        ebetGame: {
          id: 12,
          title: 'eBET电子',
          value: [],
        },
        smallGoldReal: {
          id: 14,
          title: '小金真人',
          value: [],
        },
        winwinLottery: {
          id: 19,
          title: '双赢彩票',
          value: [],
        },
        ppGame: {
          id: 17,
          title: 'PP电子',
          value: [],
        },
        fiveGmLottery: {
          id: 13,
          title: '5GM彩票',
          value: [],
        },
        mwFish: {
          id: 15,
          title: 'MW捕鱼',
          value: [],
        },
        imEsport: {
          id: 18,
          title: 'IM电竞',
          value: [],
        },
        // virtualSport: {
        //   id: 16,
        //   title: '虚拟体育',
        //   value: [],
        // },
      };

      _.each(this.gameChartAllData, (item) => {
        const yData = item.y;
        gameList.agReal.value.push(yData[consts.PLATFORM_AG_REAL] && yData[consts.PLATFORM_AG_REAL][this.currentGameStatisticType]);
        gameList.agFish.value.push(yData[consts.PLATFORM_AG_FISH] && yData[consts.PLATFORM_AG_FISH][this.currentGameStatisticType]);
        gameList.ebet.value.push(yData[consts.PLATFORM_EBET_REAL] && yData[consts.PLATFORM_EBET_REAL][this.currentGameStatisticType]);
        gameList.pt.value.push(yData[consts.PLATFORM_PT] && yData[consts.PLATFORM_PT][this.currentGameStatisticType]);
        gameList.xj188.value.push(yData[consts.PLATFORM_GAME_SPORTS] && yData[consts.PLATFORM_GAME_SPORTS][this.currentGameStatisticType]);
        gameList.sycp.value.push(yData[consts.PLATFORM_TICKET] && yData[consts.PLATFORM_TICKET][this.currentGameStatisticType]);
        gameList.hlqp.value.push(yData[consts.PLATFORM_JOY_POKER] && yData[consts.PLATFORM_JOY_POKER][this.currentGameStatisticType]);
        gameList.gmqp.value.push(yData[consts.PLATFORM_GM_POKER] && yData[consts.PLATFORM_GM_POKER][this.currentGameStatisticType]);
        gameList.agGame.value.push(yData[consts.PLATFORM_AG_GAME] && yData[consts.PLATFORM_AG_GAME][this.currentGameStatisticType]);
        gameList.ebetGame.value.push(yData[consts.PLATFORM_EBET_GAME] && yData[consts.PLATFORM_EBET_GAME][this.currentGameStatisticType]);
        gameList.smallGoldReal.value.push(yData[consts.PLATFORM_SMALL_GOLD_REAL] && yData[consts.PLATFORM_SMALL_GOLD_REAL][this.currentGameStatisticType]);
        gameList.winwinLottery.value.push(yData[consts.PLATFORM_WINWIN_LOTTERY] && yData[consts.PLATFORM_WINWIN_LOTTERY][this.currentGameStatisticType]);
        gameList.ppGame.value.push(yData[consts.PLATFORM_PP_GAME] && yData[consts.PLATFORM_PP_GAME][this.currentGameStatisticType]);
        gameList.fiveGmLottery.value.push(yData[consts.PLATFORM_FIVE_GM_LOTTERY] && yData[consts.PLATFORM_FIVE_GM_LOTTERY][this.currentGameStatisticType]);
        gameList.mwFish.value.push(yData[consts.PLATFORM_MW_FISH] && yData[consts.PLATFORM_MW_FISH][this.currentGameStatisticType]);
        gameList.imEsport.value.push(yData[consts.PLATFORM_IM_ESPORT] && yData[consts.PLATFORM_IM_ESPORT][this.currentGameStatisticType]);
        // gameList.virtualSport.value.push(yData[consts.PLATFORM_VIRTUAL_SPORT] && yData[consts.PLATFORM_VIRTUAL_SPORT][this.currentGameStatisticType]);
      });

      _.forIn(gameList, (game, key) => {
        const newGameList = _.map(game.value, item => Number(item).toFixed(2));
        returnData.push({
          title: game.title,
          value: newGameList,
        });
      });
      return returnData;
    },

  },
  watch: {
    currentCategory(currentCategory) {
      this.fetchCategoryDate(currentCategory);
    },
    generalStatisticsRange(generalStatisticsRange) {
      this.$store.dispatch(types.GET_REAL_TIME_BASIC, { isFake: generalStatisticsRange });
      this.doGet({ action: 'promoInfo' });
      this.fetchCategoryDate(this.currentCategory);
    },
    profitStatisticsRange(profitStatisticsRange) {
      this.changePeriod(this.period);
      this.$store.dispatch(types.GET_REAL_TIME_GAME_PROFIT, { isFake: profitStatisticsRange });
    },
  },
  created() {
    // this.RealTimeBasicInterval = setInterval(() => {
    this.$store.dispatch(types.GET_REAL_TIME_BASIC, { isFake: this.generalStatisticsRange });
    // }, 10000);//10s一次获取基础信息
    // this.GameProfitInterval = setInterval(() => {
    this.$store.dispatch(types.GET_REAL_TIME_GAME_PROFIT_BASIC, {
      isFake: this.profitStatisticsRange,
      stime: moment(moment().format('YYYY-MM-DD 00:00:00')).valueOf(),
      etime: moment(moment().format('YYYY-MM-DD 23:59:59:999')).valueOf(),
    });
    this.$store.dispatch(types.GET_REAL_TIME_GAME_PROFIT, { isFake: this.profitStatisticsRange });
    // }, 10000);//10s一次获取基础信息
    this.currentCategory = 'recharge';
    this.bindGet(realTimePromoInfoApi, 'promoInfo', {
      action: 'promoInfo',
      beforeSend: () => ({
        dateUnit: 0,
        resultType: 0,
        isFake: this.generalStatisticsRange,
      }),
    });
    // todo 缺少分时统计数据
    // this.bindGet(realTimePromoInfoApi,'promoInfoTimeDistribution',{
    //   action: 'promoInfo',
    // });
  },
  mounted() {
    this.doGet({ action: 'promoInfo' });
    this.bindGet(getFirstDataDetailApi, 'basicFirstRechargeData', {
      action: 'getFirstRechargeData',
      // sendingData: 'filters',
    });
    this.doGet({ action: 'getFirstRechargeData' });
  },
  beforeDestroy() {
    // clearInterval(this.RealTimeBasicInterval)
    // clearInterval(this.GameProfitInterval)
  },
  methods: {
    fetchCategoryDate(currentCategory, params) {
      let targetAction = types.GET_REAL_TIME_RECHARGE;
      switch (currentCategory) {
        case 'recharge':
          targetAction = types.GET_REAL_TIME_RECHARGE;
          break;
        case 'rechargeUser':
          targetAction = types.GET_REAL_TIME_RECHARGE_USER;
          break;
        case 'withdraw':
          targetAction = types.GET_REAL_TIME_WITHDRAW;
          break;
        case 'withdrawUser':
          targetAction = types.GET_REAL_TIME_WITHDRAW_USER;
          break;
        case 'newUser':
          targetAction = types.GET_REAL_TIME_NEW_USER;
          break;
        case 'upAmountUnique':
          targetAction = types.GET_REAL_TIME_UNIQUE;
          break;
        case 'onPoints':
          targetAction = types.GET_REAL_TIME_UP_AMOUNT;
          break;
        case 'activeUser':
          targetAction = types.GET_REAL_TIME_ACTIVE_USER;
          break;
        case 'bettingAmount':
          targetAction = types.GET_REAL_TIME_BETTING_AMOUNT;
          break;
        case 'bettingWin':
          targetAction = types.GET_REAL_TIME_BETTING_WIN;
          break;
        case 'bettingEffect':
          targetAction = types.GET_REAL_TIME_BETTING_EFFECT_AMOUNT;
          break;
        case 'bettingUser':
          targetAction = types.GET_REAL_TIME_BETTING_USER;
          break;
        case 'promoUser':
          targetAction = types.GET_REAL_TIME_PROMO_USER;
          break;
        case 'promoAmount':
          targetAction = types.GET_REAL_TIME_PROMO_AMOUNT;
          break;
        case 'firstSaveUser':
          targetAction = types.GET_REAL_TIME_RIRSTRECHARGE_USER;
          break;
        case 'rechargeMoney':
          targetAction = types.GET_REAL_TIME_FIRSTRECHARGE_MONEY;
          break;
      }
      this.$store.dispatch(targetAction, { isFake: this.generalStatisticsRange });
    },
    categoryChange(category) {
      this.currentCategory = category;
      // this.$set(this.currentCategory,category)
    },
    changeGameStatisticType(type) {
      this.currentGameStatisticType = type;
    },
    checkDetail(visibalDialog) {
      this.visibleDialog = visibalDialog;
    },
    closeDialog() {
      this.visibleDialog = undefined;
    },
    changePeriod(period) {
      this.period = period;
      const params = {
        isFake: this.profitStatisticsRange,
        stime: period == 'today' ? moment(moment().format('YYYY-MM-DD 00:00:00')).valueOf() : moment(moment().subtract(1, 'days').format('YYYY-MM-DD 00:00:00')).valueOf(),
        etime: period == 'today' ? moment(moment().format('YYYY-MM-DD 23:59:59:999')).valueOf() : moment(moment().subtract(1, 'days').format('YYYY-MM-DD 23:59:59:999')).valueOf(),
      };
      this.$store.dispatch(types.GET_REAL_TIME_GAME_PROFIT_BASIC, params);
    },
    checkGame(type, gameInfo, gamePlatformId) {
      if (_.has(gameInfo, gamePlatformId)) {
        return type === 1 ? Number(gameInfo[gamePlatformId].win).toFixed(2) : gameInfo[gamePlatformId].amount;
      }
      return 0;
    },
    getTotal(type, gameInfo) {
      let total = 0;
      const arr = _.toArray(gameInfo);
      if (type === 1) {
        total = Number(_.sumBy(arr, item => item.win)).toFixed(2);
      } else {
        total = _.sumBy(arr, item => item.amount);
      }
      return total;
    },
  },
};
</script>
<style lang="scss" scoped>
$border-color-1: #dcdfe6;

  .box-card {
    width: 100%;
    margin: 10px 0;
  }

  .height-300 {
    height: 300px;
  }

  .db-category-list {
    border: 1px solid $border-color-1;
    overflow: hidden;
    /*margin-right: 20px;*/
    /*display: flex;*/
  }

  .m-l-20 {
    margin-left: 20px;
  }

  .m-r-20 {
    margin-right: 20px;
  }

  .m-l-10 {
    margin-left: 10px;
  }

  .m-r-10 {
    margin-right: 10px;
  }


  .db-category-item {
    height: 100px;
    padding: 10px;
    border: 1px solid $border-color-1;
    border-right: 0;

    line-height: 16px;
    cursor: pointer;

    &:last-child {
      border-right: 1px solid $border-color-1;
    }

    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;

    &.active {
      background: #e7e7e7;
      /*color: #fff;*/
    }

    > div {
      width: 100%;
      height: 100%;
    }
  }
  .gutter{
    margin-right: 10px;
    border-right: 1px solid $border-color-1;
  }

  .db-date-filter {
    height: 18px;
    margin: 10px 10px 0 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .db-profit-filter {
    position: absolute;
    height: 18px;
    margin: 37px 10px 0 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    z-index: 1;

    .el-button {
      font-style: italic;

      &.active {
        /*border: 1px solid #409eff ;*/
        font-weight: 900;
        font-style: normal;
        font-size: 16px;
      }
    }
  }

  .profit-chart {
    margin-top: 20px;
  }

  .filter-item {
    margin-right: 20px;
  }

  .card-container {
    margin: 10px 0;
  }

  .card-name {
    height: 40px;
    text-align: center;
    flex: 0 1 50%;
    /*white-space: nowrap;*/
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .card-data {
    height: 25px;
    text-align: center;
    flex: 0 1 25%;
  }

  .card-rate {
    height: 25px;
    text-align: center;
    flex: 0 1 25%;
  }

  .box-card-half {
    width: 100%;
    height: 400px;
    /*margin: 10px 0;*/
    margin-bottom: 5px;
  }

  .game-sum {
    .el-button--text {
      color: #909399;

      &.active {
        color: #409EFF
      }
    }
  }

  .green {
    color: green;
  }

  .red {
    color: red;
  }

  .list-profit-loss{
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    border: 1px solid #ebeef5;
    border-bottom: none;
    border-right: none;
    .detail{
      max-width: 110px;
      min-width: 80px;
      display: flex;
      flex: 1;
      flex-direction: column;
      text-align: center;
      border-right: 1px solid #ebeef5;
      .detail-item{
        border-bottom: 1px solid #ebeef5;
        padding: 6px 10px;

      }
    }
  }
</style>
